<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="font-weight: 700" label="操作时间">
                <el-date-picker v-model="formInline.createTime" type="daterange" range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="font-weight: 700" label="审核状态">
                <el-select v-model="formInline.status" placeholder="请选择">
                    <el-option label="审核中" value="0"></el-option>
                    <el-option label="审核拒绝" value="1"></el-option>
                    <el-option label="审核通过" value="2"></el-option>
                    <el-option label="审核撤销" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="ResetFn">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="serviceItemName" label="套餐名称" align="center">
            </el-table-column>
            <el-table-column prop="serviceItemPrice" label="套餐价格" align="center">
            </el-table-column>
            <el-table-column prop="serviceItemInfo" label="套餐备注" show-overflow-tooltip width="128" align="center">
            </el-table-column> 
            <el-table-column prop="createTime" label="创建时间" width="180" align="center">
                <template #default="{ row }">
                    {{ row.createTime | dateFormat }}
                </template>
            </el-table-column>
            <el-table-column prop="statisticalAmount" label="状态" align="center">
                <template #default="{ row }">
                    {{ row.status == 0 ? '审核中' : ( row.status == 1 ? '审核拒绝' : ( row.status == 2 ? '审核通过' : (row.status == 3?'审核撤销':''))) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="218">
                <template #default="{ row }">
                    <el-button type="text" size="mini" icon="el-icon-edit" @click="historyFn(row.instanceId)">审批历史</el-button>
                    <el-button type="text" size="mini" icon="el-icon-info" @click="processFn(row.id)">进度查看</el-button>
                    <el-button type="text" size="mini" icon="el-icon-delete" @click="cancelFn(row.id)">撤销 </el-button>
                    <el-dialog
  title="审批历史"
  :visible.sync="historyShow">
  <el-table
      :data="historyTableData"
      style="width: 100%">
      <el-table-column
        prop="taskName"
        label="任务名称"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="durationInMillis"
        label="耗时"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="comment"
        label="审批意见"
        width="180"
        align="center">
      </el-table-column>
    </el-table>
  <span slot="footer" class="dialog-footer">
    <el-button @click="historyShow = false">关闭</el-button>
  </span>
</el-dialog>
<el-dialog
  title="流程进度图"
  width="80%"
  :visible.sync="processShow">
  <span slot="footer" class="dialog-footer">
    <el-button @click="processShow = false">关闭</el-button>
  </span>
</el-dialog>

                </template>
            </el-table-column>

        </el-table>
        <div class="page">
            <el-pagination :page-size="formInline.pageSize" :page-sizes="[10, 20, 30, 50]" background
                :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { carPackageAuditAPI, searchCarPackageAuditAPI ,getHistoryAPI,getProcessAPI,cancelAPI} from "@/API/hbaip/api";
export default {
    data() {
        return {
            currentPage:1,
            tableData:[],
            historyTableData:[],
            total:0,
            formInline: {
                pageNum: 1,
                pageSize: 3,
                status: '',
                createTime: [],
                'params[beginTime]': "",
                'params[endTime]': "",
            },
            historyShow:false,
            processShow:false,
        }
    },
    created() {
        this.getCarPackageAudit()
    },
    methods: {
        // 撤销套餐
        cancelFn(id){
            this.$confirm(`是否确认撤销套餐？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await cancelAPI(id)
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '撤销成功!'
                    });
                    this.getCarPackageAudit()
                } else {
                    this.$message({
                        type: 'error',
                        message: '审批已完成!'
                    });
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 流程进度图
        processFn(id){
            this.processShow=true
            getProcessAPI(id).then((res)=>{
              if(res.code==500){
                this.$message({
                        type: 'error',
                        message: res.msg
                    });
              }
            })
        },  
        // 审核历史
         historyFn(instanceId){
            this.historyShow=true
            getHistoryAPI(instanceId).then((res)=>{
                this.historyTableData=res.rows
            })
        },
        handleSizeChange(val) {
            carPackageAuditAPI({
                dateStatus: this.formInline.auditType,
                pageNum: this.formInline.pageNum,
                pageSize: val,
            }).then((d) => {
                this.tableData = d.rows
                this.total = d.total
            });
            this.formInline.pageSize = val
        },
        handleCurrentChange(val) {
            carPackageAuditAPI({
                dateStatus: this.formInline.auditType,
                pageNum: val,
                pageSize: this.formInline.pageSize,
            }).then((d) => {
                this.tableData = d.rows
                this.total = d.total
            });
            this.formInline.pageNum = val;
        },
        // 重置
        ResetFn() {
            this.createTime = []
            this.formInline.dateStatus = 0
            this.getCarPackageAudit();
        },
        // 搜索
        searchFn() {
            this.formInline.startTime = this.createTime[0]
            this.formInline.endTime = this.createTime[1]
            searchCarPackageAuditAPI(
                this.formInline
            ).then((res) => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        async getCarPackageAudit() {
            let res = await carPackageAuditAPI({
                dateStatus: this.formInline.dateStatus,
                pageNum: this.formInline.pageNum,
                pageSize: this.formInline.pageSize,
            })
            this.tableData = res.rows
            this.total = res.total
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-date-editor {
    width: 240px;
}

/deep/ .el-select {
    width: 176px;
}

/deep/ .el-table .el-table__header-wrapper th {
    background-color: #f8f8f9;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    font-weight: 700;
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>